<template>
  <div class="holographic-search">
    <!-- 查询理由弹窗 -->
    <el-dialog
      title="查询授权验证"
      :visible.sync="showReasonDialog"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <div class="reason-dialog-content">
        <div class="dialog-icon">
          <i class="el-icon-warning" style="color: #E6A23C; font-size: 48px;"></i>
        </div>
        <p class="dialog-message">
          您正在访问全息查询系统，根据相关法律法规和管理制度要求，请说明您的查询理由：
        </p>
        <el-form :model="reasonForm" :rules="reasonRules" ref="reasonForm">
          <el-form-item prop="reason">
            <el-input
              v-model="reasonForm.reason"
              type="textarea"
              :rows="4"
              placeholder="请详细说明查询理由，例如：案件调查、日常巡检、应急处置等..."
              maxlength="500"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item prop="operator">
            <el-input
              v-model="reasonForm.operator"
              placeholder="请输入操作人员姓名"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-warning">
          <i class="el-icon-info"></i>
          <span>本次查询操作将被记录，请确保查询理由真实有效</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleReasonCancel">取消访问</el-button>
        <el-button type="primary" @click="handleReasonSubmit" :loading="submittingReason">
          确认并继续
        </el-button>
      </div>
    </el-dialog>

    <!-- 初始状态的标题 -->
    <div v-show="!hasSearched" class="title-container">
      <h1 class="title title-center">全息查询</h1>
    </div>

    <!-- 统一的搜索区域 - 使用同一个元素实现位置变化 -->
    <div class="search-wrapper" :class="{ 'search-wrapper-top': hasSearched }">
      <div class="search-content">
        <!-- 搜索后状态：标题和搜索框在同一行 -->
        <div v-if="hasSearched" class="top-header">
          <h2 class="title title-inline">全息查询</h2>
          <div class="search-box-container">
            <SearchBox
              v-model="searchValue"
              placeholder="请输入查询内容"
              :show-button="true"
              size="small"
              @search="handleSearch"
            />
          </div>
          <div class="radio-container radio-horizontal">
            <el-radio-group v-model="searchType" size="small">
              <el-radio label="person">人员</el-radio>
              <el-radio label="vehicle">车辆</el-radio>
              <el-radio label="object">物体</el-radio>
              <el-radio label="event">事件</el-radio>
            </el-radio-group>
          </div>
        </div>

        <!-- 初始状态：垂直布局 -->
        <div v-else class="initial-content">
          <div class="search-box-container">
            <SearchBox
              v-model="searchValue"
              placeholder="请输入查询内容"
              :show-button="true"
              size="medium"
              @search="handleSearch"
            />
          </div>
          
          <div class="radio-container">
            <el-radio-group v-model="searchType" size="medium">
              <el-radio label="person">人员</el-radio>
              <el-radio label="vehicle">车辆</el-radio>
              <el-radio label="object">物体</el-radio>
              <el-radio label="event">事件</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <transition name="results-transition">
      <div 
        v-if="hasSearched" 
        class="results-section" 
        ref="resultsSection"
        v-loading="loading"
        element-loading-text="搜索中..."
      >
        <div v-if="searchResults.length > 0" class="results-container">
            <div class="results-header">
              <span class="results-count">找到 {{ total > 0 ? total : searchResults.length }} 条结果</span>
            </div>
            
            <!-- 卡片网格布局 -->
            <div class="results-grid">
              <transition-group name="result-item" tag="div" class="grid-container">
                <div
                  v-for="(item, index) in searchResults"
                  :key="`result-${item.id || index}`"
                  class="result-card"
                >
                  <el-card class="card-item" shadow="hover">
                    <!-- 卡片头部 -->
                    <div class="card-header">
                      <div class="card-avatar">
                        <i :class="getTypeIcon(item.type || searchType)"></i>
                      </div>
                      <div class="card-title-section">
                        <h3 class="card-title">{{ item.title || item.name || '未知标题' }}</h3>
                        <span class="card-type">{{ getTypeLabel(item.type || searchType) }}</span>
                      </div>
                      <div class="card-status">
                        <el-tag :type="getStatusType(item.status)" size="small">
                          {{ item.status || '正常' }}
                        </el-tag>
                      </div>
                    </div>
                    
                    <!-- 卡片内容 -->
                    <div class="card-content">
                      <p class="card-description">{{ item.description || item.content || '暂无详细信息' }}</p>
                      
                      <!-- 属性列表 -->
                      <div class="card-attributes" v-if="item.attributes">
                        <div
                          v-for="(value, key) in item.attributes"
                          :key="key"
                          class="attribute-item"
                        >
                          <span class="attr-label">{{ key }}:</span>
                          <span class="attr-value">{{ value }}</span>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 卡片底部 -->
                    <div class="card-footer">
                      <div class="card-time" v-if="item.time">
                        <i class="el-icon-time"></i>
                        <span>{{ item.time }}</span>
                      </div>
                      <div class="card-actions">
                        <el-button size="mini" type="text">详情</el-button>
                        <el-button size="mini" type="text">分析</el-button>
                      </div>
                    </div>
                  </el-card>
                </div>
              </transition-group>
            </div>
            
            <!-- 加载更多 -->
            <div class="load-more-container" v-if="hasMore">
              <div v-if="loadingMore" class="loading-more">
                <i class="el-icon-loading"></i>
                <span>加载中...</span>
              </div>
              <div v-else class="load-trigger" ref="loadTrigger">
                <el-button size="small" @click="loadMore">加载更多</el-button>
              </div>
            </div>
            
            <div v-if="!hasMore && searchResults.length > 0" class="no-more-data">
              <span>没有更多数据了</span>
            </div>
          </div>

          <div v-else-if="!loading && hasSearched" class="no-results">
            <el-empty description="未找到相关结果">
              <el-button type="primary" @click="resetSearch">重新搜索</el-button>
            </el-empty>
          </div>
      </div>
    </transition>
  </div>
</template>

<script>
import SearchBox from '@/components/SearchBox.vue'

export default {
  name: 'HolographicSearch',
  components: {
    SearchBox
  },
  data() {
    return {
      searchValue: '',
      searchType: 'person',
      hasSearched: false,
      loading: false,
      loadingMore: false,
      searchResults: [],
      currentPage: 1,
      hasMore: true,
      total: 0,
      // 查询理由弹窗相关
      showReasonDialog: true,
      submittingReason: false,
      reasonAuthorized: false,
      reasonForm: {
        reason: '',
        operator: ''
      },
      reasonRules: {
        reason: [
          { required: true, message: '请输入查询理由', trigger: 'blur' },
          { min: 10, message: '查询理由至少需要10个字符', trigger: 'blur' },
          { max: 500, message: '查询理由不能超过500个字符', trigger: 'blur' }
        ],
        operator: [
          { required: true, message: '请输入操作人员姓名', trigger: 'blur' },
          { min: 2, message: '姓名至少需要2个字符', trigger: 'blur' },
          { max: 20, message: '姓名不能超过20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    // 添加滚动监听器来实现触底加载
    this.$nextTick(() => {
      this.initScrollListener()
    })
  },

  beforeDestroy() {
    this.removeScrollListener()
  },

  methods: {
    async handleSearch() {
      // 检查是否已授权
      if (!this.reasonAuthorized) {
        this.$message.error('请先提交查询理由并获得授权')
        this.showReasonDialog = true
        return
      }

      if (!this.searchValue.trim()) {
        this.$message.warning('请输入查询内容')
        return
      }

      // 重置分页状态
      this.currentPage = 1
      this.hasMore = true
      this.loading = true
      
      try {
        const response = await this.callSearchAPI(1)
        
        if (response && response.data && response.data.length > 0) {
          this.searchResults = response.data
          this.total = response.total || response.data.length
          this.hasMore = response.hasMore !== undefined ? response.hasMore : response.data.length >= 10
          this.hasSearched = true
        } else {
          this.searchResults = []
          this.total = 0
          this.hasMore = false
          this.hasSearched = true
        }
      } catch (error) {
        console.error('搜索失败:', error)
        this.$message.error('搜索失败，请重试')
        this.searchResults = []
        this.hasSearched = true
      } finally {
        this.loading = false
      }
    },

    async loadMore() {
      if (this.loadingMore || !this.hasMore) return
      
      // 记录当前滚动位置
      const currentScrollY = window.scrollY
      
      this.loadingMore = true
      this.currentPage++
      
      try {
        const response = await this.callSearchAPI(this.currentPage)
        
        if (response && response.data && response.data.length > 0) {
          this.searchResults.push(...response.data)
          this.hasMore = response.hasMore !== undefined ? response.hasMore : response.data.length >= 10
          
          // 等待DOM更新后恢复滚动位置
          this.$nextTick(() => {
            // 给一个小的延迟确保DOM完全更新
            setTimeout(() => {
              window.scrollTo(0, currentScrollY)
            }, 10)
          })
        } else {
          this.hasMore = false
        }
      } catch (error) {
        console.error('加载更多失败:', error)
        this.$message.error('加载更多失败，请重试')
        this.currentPage-- // 回退页码
      } finally {
        this.loadingMore = false
      }
    },

    async callSearchAPI(page = 1) {
      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          const pageSize = 8
          const startIndex = (page - 1) * pageSize
          
          // 生成更多模拟数据
          const allMockData = []
          for (let i = 0; i < 50; i++) {
            const types = ['person', 'vehicle', 'object', 'event']
            const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
            const vehicles = ['粤A12345', '京B67890', '沪C11111', '津D22222']
            const objects = ['手机', '钱包', '身份证', '银行卡', '钥匙', '包包']
            const events = ['入侵事件', '异常行为', '交通违规', '设备故障']
            
            const type = types[i % types.length]
            let title, description, attributes
            
            switch (type) {
              case 'person':
                title = names[i % names.length] + (i > 7 ? i : '')
                description = `身份证号: ${Math.random().toString().substr(2, 18)}`
                attributes = {
                  '年龄': Math.floor(Math.random() * 50 + 20) + '岁',
                  '性别': Math.random() > 0.5 ? '男' : '女',
                  '地址': '深圳市南山区'
                }
                break
              case 'vehicle':
                title = vehicles[i % vehicles.length] + (i > 3 ? Math.floor(i/4) : '')
                description = '小型汽车，颜色：' + ['白色', '黑色', '银色', '红色'][i % 4]
                attributes = {
                  '车型': '小型汽车',
                  '品牌': ['奔驰', '宝马', '奥迪', '丰田'][i % 4],
                  '年检': '2024-12-31'
                }
                break
              case 'object':
                title = objects[i % objects.length] + (i > 5 ? Math.floor(i/6) : '')
                description = '遗失物品，请联系失主'
                attributes = {
                  '颜色': ['黑色', '白色', '蓝色', '红色'][i % 4],
                  '材质': ['塑料', '金属', '皮革', '布料'][i % 4]
                }
                break
              case 'event':
                title = events[i % events.length] + (i > 3 ? Math.floor(i/4) : '')
                description = '系统检测到异常情况，需要关注'
                attributes = {
                  '级别': ['低', '中', '高', '紧急'][i % 4],
                  '状态': ['处理中', '已解决', '待处理'][i % 3]
                }
                break
            }
            
            allMockData.push({
              id: i + 1,
              title,
              description,
              type,
              time: `2024-01-${String(i % 30 + 1).padStart(2, '0')} ${String(i % 24).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}:00`,
              status: ['正常', '异常', '待确认', '已处理'][i % 4],
              attributes
            })
          }
          
          const pageData = allMockData.slice(startIndex, startIndex + pageSize)
          const hasMore = startIndex + pageSize < allMockData.length
          
          resolve({
            data: this.searchValue.includes('test') ? [] : pageData,
            total: this.searchValue.includes('test') ? 0 : allMockData.length,
            hasMore,
            currentPage: page
          })
        }, Math.random() * 1000 + 500) // 随机延迟0.5-1.5秒
      })

      // 实际API调用代码：
      // return this.$http.post('/api/holographic-search', {
      //   query: this.searchValue,
      //   type: this.searchType,
      //   page: page,
      //   pageSize: 8
      // })
    },

    initScrollListener() {
      this.throttledScrollHandler = this.throttle(this.handleScroll, 200)
      window.addEventListener('scroll', this.throttledScrollHandler)
    },

    removeScrollListener() {
      if (this.throttledScrollHandler) {
        window.removeEventListener('scroll', this.throttledScrollHandler)
      }
    },

    handleScroll() {
      if (!this.hasSearched || !this.hasMore || this.loadingMore) return
      
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const windowHeight = window.innerHeight
      const documentHeight = document.documentElement.scrollHeight
      
      // 距离底部100px时触发加载
      if (scrollTop + windowHeight >= documentHeight - 100) {
        this.loadMore()
      }
    },

    throttle(func, delay) {
      let timeoutId
      let lastExecTime = 0
      return function (...args) {
        const currentTime = Date.now()
        
        if (currentTime - lastExecTime > delay) {
          func.apply(this, args)
          lastExecTime = currentTime
        } else {
          clearTimeout(timeoutId)
          timeoutId = setTimeout(() => {
            func.apply(this, args)
            lastExecTime = Date.now()
          }, delay - (currentTime - lastExecTime))
        }
      }
    },

    getTypeLabel(type) {
      const typeMap = {
        person: '人员',
        vehicle: '车辆',
        object: '物体',
        event: '事件'
      }
      return typeMap[type] || type
    },

    getTypeIcon(type) {
      const iconMap = {
        person: 'el-icon-user',
        vehicle: 'el-icon-truck',
        object: 'el-icon-box',
        event: 'el-icon-warning-outline'
      }
      return iconMap[type] || 'el-icon-info'
    },

    getStatusType(status) {
      const statusMap = {
        '正常': 'success',
        '异常': 'danger',
        '待确认': 'warning',
        '已处理': 'info'
      }
      return statusMap[status] || 'info'
    },

    resetSearch() {
      this.hasSearched = false
      this.searchResults = []
      this.searchValue = ''
      this.currentPage = 1
      this.hasMore = true
      this.total = 0
    },

    // 查询理由弹窗处理方法
    async handleReasonSubmit() {
      try {
        await this.$refs.reasonForm.validate()
        
        this.submittingReason = true
        
        // 模拟提交查询理由到服务器
        await this.submitReasonToServer()
        
        this.reasonAuthorized = true
        this.showReasonDialog = false
        
        this.$message.success('授权验证通过，您现在可以进行查询操作')
        
        // 记录查询理由和操作人员信息
        console.log('查询理由记录:', {
          reason: this.reasonForm.reason,
          operator: this.reasonForm.operator,
          timestamp: new Date().toLocaleString(),
          ip: 'xxx.xxx.xxx.xxx' // 实际应用中应获取真实IP
        })
        
      } catch (error) {
        if (error.message) {
          // 表单验证错误
          return
        } else {
          console.error('提交查询理由失败:', error)
          this.$message.error('授权验证失败，请重试')
        }
      } finally {
        this.submittingReason = false
      }
    },

    async submitReasonToServer() {
      // 模拟API调用
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟随机成功/失败（95%成功率）
          if (Math.random() > 0.05) {
            resolve({
              code: 200,
              message: '授权验证通过',
              data: {
                authorized: true,
                sessionId: 'hs_' + Date.now()
              }
            })
          } else {
            reject(new Error('服务器繁忙，请稍后重试'))
          }
        }, 2000) // 模拟2秒网络延迟
      })

      // 实际API调用代码：
      // return this.$http.post('/api/submit-query-reason', {
      //   reason: this.reasonForm.reason,
      //   operator: this.reasonForm.operator,
      //   timestamp: new Date().toISOString(),
      //   userAgent: navigator.userAgent
      // })
    },

    handleReasonCancel() {
      this.$confirm('取消访问将返回上一页，确定要离开吗？', '确认取消', {
        confirmButtonText: '确定离开',
        cancelButtonText: '继续填写',
        type: 'warning'
      }).then(() => {
        // 返回上一页或首页
        this.$router.go(-1) || this.$router.push('/')
      }).catch(() => {
        // 用户取消，继续停留在当前页面
      })
    }
  }
}
</script>

<style scoped>
.holographic-search {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* 标题容器和过渡 */
.title-container {
  position: relative;
  height: auto;
}

.title {
  margin: 0;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.title-center {
  font-size: 48px;
  text-align: center;
  margin-top: 15vh;
  margin-bottom: 60px;
  opacity: 1;
  transform: translateY(0);
}

.title-left {
  font-size: 24px;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 0;
  transform: translateX(-50px);
}

/* 当搜索后，标题状态变化 */
.holographic-search:has(.search-wrapper-top) .title-center {
  opacity: 0;
  transform: translateY(-30px);
}

.holographic-search:has(.search-wrapper-top) .title-left {
  opacity: 1;
  transform: translateX(0);
}

/* 搜索包装器 - 关键的移动容器 */
.search-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.search-wrapper-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  transform: none;
}

/* 搜索内容容器 */
.search-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.search-wrapper-top .search-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  padding: 20px 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 0;
}

/* 初始状态布局 */
.initial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.initial-content .search-box-container {
  width: 100%;
  margin-bottom: 30px;
}

.initial-content .radio-container {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.initial-content .radio-container .el-radio {
  color: white;
  font-size: 16px;
}

.initial-content .radio-container .el-radio.is-checked .el-radio__label {
  color: #409EFF;
}

/* 顶部头部布局 - 同一行显示标题、搜索框和单选框 */
.top-header {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.title-inline {
  font-size: 24px;
  color: #303133;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.top-header .search-box-container {
  width: 300px;
  flex-shrink: 0;
}

.top-header .radio-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.top-header .radio-container .el-radio {
  color: #606266;
  font-size: 14px;
  margin-right: 10px;
}

.top-header .radio-container .el-radio.is-checked .el-radio__label {
  color: #409EFF;
}

/* 结果区域样式 */
.results-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  margin: 100px 20px 20px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.results-container {
  padding: 30px;
}

.results-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.results-count {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

/* 卡片网格布局 */
.results-grid {
  width: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  padding: 0;
}

.result-card {
  width: 100%;
}

.card-item {
  height: 100%;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 12px;
  overflow: hidden;
}

.card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-item .el-card__body {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-bottom: 1px solid #e4e7ed;
}

.card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
  margin-right: 12px;
}

.card-title-section {
  flex: 1;
  min-width: 0;
}

.card-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-type {
  font-size: 12px;
  color: #909399;
}

.card-status {
  flex-shrink: 0;
}

/* 卡片内容 */
.card-content {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}

.card-description {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-attributes {
  margin-top: auto;
}

.attribute-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}

.attribute-item:last-child {
  margin-bottom: 0;
}

.attr-label {
  color: #909399;
  flex-shrink: 0;
  margin-right: 8px;
}

.attr-value {
  color: #606266;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fafafa;
  border-top: 1px solid #e4e7ed;
}

.card-time {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.card-time i {
  margin-right: 4px;
}

.card-actions {
  display: flex;
  gap: 8px;
}

/* 加载更多样式 */
.load-more-container {
  text-align: center;
  padding: 30px 0;
  margin-top: 20px;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #909399;
  font-size: 14px;
}

.loading-more i {
  animation: rotating 2s linear infinite;
}

.load-trigger {
  margin: 0 auto;
}

.no-more-data {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 14px;
  border-top: 1px solid #e4e7ed;
  margin-top: 20px;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.no-results {
  text-align: center;
  padding: 80px 20px;
}

/* 结果过渡动画 */
.results-transition-enter-active {
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 0.3s;
}

.results-transition-enter {
  opacity: 0;
  transform: translateY(50px);
}

/* 结果项列表动画 */
.result-item-enter-active {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.result-item-enter {
  opacity: 0;
  transform: translateY(30px);
}

.result-item-enter-active:nth-child(1) { transition-delay: 0.1s; }
.result-item-enter-active:nth-child(2) { transition-delay: 0.2s; }
.result-item-enter-active:nth-child(3) { transition-delay: 0.3s; }
.result-item-enter-active:nth-child(4) { transition-delay: 0.4s; }
.result-item-enter-active:nth-child(5) { transition-delay: 0.5s; }

/* 响应式设计 */
@media (max-width: 768px) {
  .title-center {
    font-size: 36px;
    margin-top: 10vh;
  }
  
  .title-inline {
    font-size: 18px;
  }
  
  .search-wrapper {
    width: 90%;
  }
  
  .search-wrapper-top {
    top: 0;
    width: 100%;
  }
  
  .top-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .top-header .search-box-container {
    width: 100%;
  }
  
  .top-header .radio-container {
    justify-content: center;
  }
  
  .results-section {
    margin-top: 160px;
  }
  
  .results-container {
    padding: 20px;
  }
  
  .grid-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .card-header {
    padding: 12px 16px;
  }
  
  .card-content {
    padding: 12px 16px;
  }
  
  .card-footer {
    padding: 10px 16px;
  }
}

/* CSS支持检测 - 如果不支持:has()则使用备用方案 */
@supports not (selector(:has(*))) {
  .search-wrapper.search-wrapper-top ~ .title-container .title-center {
    opacity: 0;
    transform: translateY(-30px);
  }
  
  .search-wrapper.search-wrapper-top ~ .title-container .title-left {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 优化过渡性能 */
.search-wrapper,
.search-content,
.title {
  will-change: transform, opacity;
}

/* 添加微妙的背景变化 */
.holographic-search {
  transition: background 1.2s ease;
}

/* 查询理由弹窗样式 */
.reason-dialog-content {
  text-align: center;
  padding: 20px 0;
}

.dialog-icon {
  margin-bottom: 20px;
}

.dialog-message {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 30px;
  text-align: left;
}

.dialog-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fdf6ec;
  border: 1px solid #faecd8;
  border-radius: 6px;
  padding: 12px;
  margin-top: 20px;
  font-size: 14px;
  color: #e6a23c;
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}

.dialog-footer .el-button {
  margin: 0 10px;
  padding: 12px 30px;
}

/* 弹窗覆盖样式 */
.el-dialog__wrapper {
  backdrop-filter: blur(5px);
}

.el-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.el-dialog__body {
  padding: 24px;
}

.el-dialog__footer {
  border-top: 1px solid #e4e7ed;
  background: #fafafa;
}
</style>